<template>
  <div class='turn-table pr'>
    <span class="pa rules btn-active" v-show="showrules" @click="showRules">抽奖规则</span>
    <img :src="imgs.bac1" alt="">
    <img class="bac2 pa" :src="imgs.bac2" alt="">
    <img class="bac3 pa" :src="imgs.bac3" alt="">

    <div class="bac4 pa">
      <img ref="prize0" class="bac4-img" :src="imgs.bac4" alt="">
      <div ref="prize1" class="word pa">
        <span class="pa" v-for="item in listData">{{item}}</span>
      </div>

      <div class="bac5 pa"  @click="getPrize">
        <span class="pa draw-prize" @click.stop="getPrize">立即抽奖</span>
      </div>
    </div>

    <PrizeList class="marginTop10 pa" :listData="prizeListData" ></PrizeList>

    <div class="model pa" v-show="isprizing"></div>
  </div>
</template>
<script>
import PrizeList from './prizelist'
export default {
  props:["turnType",],
  components: {PrizeList},
  name: "",
  data() {
    return {
      imgs:{
        bac1:require('../../../../assets/img/hpmepage/newuser/bac1.png'),
        bac2:require('../../../../assets/img/hpmepage/newuser/bac2.png'),
        bac3:require('../../../../assets/img/hpmepage/newuser/bac3.png'),
        bac4:require('../../../../assets/img/hpmepage/newuser/bac4.png'),
        bac5:require('../../../../assets/img/hpmepage/newuser/bac5.png'),
      },
      isprizing:false,
      showrules:false,//是否显示抽奖规则
      rule:{
        draw:"",
        number:"",
      },
      levelclass:"prize5",

      prizeListData:[
        {
          phone:"18771142896",
          prize:"终极大奖-张**",
          time:"***",
        }
      ],
      
      listData:["神秘礼包","免费洗车","精品套餐","精品套餐","精品套餐","精品套餐"],

    };
  },
  computed:{
    
  },
  methods: {
    getPrize(){
      this.$refs.prize0.classList.remove(this.levelclass)
      this.$refs.prize1.classList.remove(this.levelclass)
      var params={
        userId:sessionStorage.getItem("userId")||1
      }
      
      _g.apiPost("memberExclusive/draw.do",params,true).then(res=>{
        if(res.status==0){
          var level=this.listData.indexOf(res.data)
          this.levelclass="prize"+level
          this.$refs.prize0.classList.add(this.levelclass)
          this.$refs.prize1.classList.add(this.levelclass)
          this.isprizing=true
          this.$store.state.dialogs.prizealert.content=res.data
          this.$store.state.dialogs.prizealert.type=res.status==0?1:2
          setTimeout(()=>{
            this.isprizing=false
            this.$store.state.dialogs.prizealert.show=true
          },3200)
        }else{
          var that=this
          this.$store.state.dialogs.alert.content=res.msg||res.data
          this.$store.state.dialogs.alert.OK=function(){}
          this.$store.state.dialogs.alert.show=true
        }
      })
    },
    
    getList(){
      var params={
        userId:sessionStorage.getItem("userId")||1
      }
      var that=this
      _g.apiPost("memberExclusive/init.do",params).then(res=>{
        var listGoal=[]
        if(res.status==1){
          this.$store.state.dialogs.alert.content=res.msg
          this.$store.state.dialogs.alert.show=true
          this.$store.state.dialogs.alert.OK=function(){
            that.$router.go(-1)
          }
          return
        }
        res.data.prize.forEach(ele => {
          listGoal.push(ele.name)
        });
        this.$set(this,"listData",listGoal)
        
        var prizeGoal=[]
        res.data.winners.forEach(ele=>{
          prizeGoal.push({
            phone:ele.user.phone,
            prize:ele.lotteryInfo.name,
            time:"3分钟"
          })
        })
        this.$set(this,"prizeListData",prizeGoal)
        
        this.showrules=true
        this.rule.draw=res.data.draw
        this.rule.number=res.data.number
      })
    },
    showRules(){
      this.$store.state.dialogs.alert.show=true
      this.$store.state.dialogs.alert.title="抽奖规则"
      this.$store.state.dialogs.alert.content="<p style='line-height:25px'>最多抽奖次数："+this.rule.number+"</p>"+"<p style='line-height:25px'>积分消耗："+this.rule.draw+"/次</p>"
      // console.log("click---查看抽奖规则")
    }
  },
  created() {
    this.getList()
  },
  beforeDestroy() {
    this.$store.state.dialogs.alert.OK=null
  },
};
</script>
<style lang="scss" scoped>
.turn-table {
  overflow-x: hidden;
  width: 100%;
  .rules{
    right: 10px;
    top: 10px;
    font-size: 12px;
    color: #fff;
    // line-height: 20px;
    padding: 2px 5px;
    opacity: .8;
    border:1px solid #fff;
  }

  img{
    width: 100%;
  }
  .bac2{
    top: 25px;
    width: calc(100% - 40px);
    left: 50%;
    transform: translateX(-50%);
  }
  .bac3{
    top: 50px;
    width: calc(100% - 80px);
    left: 50%;
    transform: translateX(-50%);
  }

  .bac4-img.prize0,.word.prize0{
    transition: all 3s;
    transform: rotate(3600deg)
  }
  .bac4-img.prize1,.word.prize1{
    transition: all 3s;
    transform: rotate(3540deg)
  }
  .bac4-img.prize2,.word.prize2{
    transition: all 3s;
    transform: rotate(3480deg)
  }
  .bac4-img.prize3,.word.prize3{
    transition: all 3s;
    transform: rotate(3420deg)
  }
  .bac4-img.prize4,.word.prize4{
    transition: all 3s;
    transform: rotate(3720deg)
  }
  .bac4-img.prize5,.word.prize5{
    transition: all 3s;
    transform: rotate(3660deg)
  }

  .bac5-img.prize0{
    transition: all 3s;
    transform: rotate(-3600deg)
  }
  .bac5-img.prize1{
    transition: all 3s;
    transform: rotate(-3540deg)
  }
  .bac5-img.prize2{
    transition: all 3s;
    transform: rotate(-3480deg)
  }
  .bac5-img.prize3{
    transition: all 3s;
    transform: rotate(-3420deg)
  }
  .bac5-img.prize4{
    transition: all 3s;
    transform: rotate(-3480deg)
  }
  .bac5-img.prize5{
    transition: all 3s;
    transform: rotate(-3420deg)
  }

  .bac4{
    top: 25%;
    width: calc(100% - 86px);
    left: 50%;
    transform: translateX(-50%);
  }
  .bac5{
    top: 50%;
    left: 50%;
    width: 87px;
    height: 93px;
    transform: translate(-50%,-50%);
  }

  .draw-prize{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    text-align: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    font-size: 18px;
    color: #fff;
    border: 2px solid #fff;
    background-color: #fc3d2e;
    line-height: 20px;
    transition: all 1s;
  }
  .draw-prize::before{
    position: absolute;
    content: "";
    height: 2px;
    width: 30px;
    background: linear-gradient(left,#000,#fff);
    background: -webkit-gradient(linear, left bottom, right top, from(#000), to(#fff));
    top: 0;
    left: 50%;
    transform-origin: center;
    transform:translate(-50%,-10px) rotate(90deg);

  }
  .word{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    span{
      top: 50%;
      left: 50%;
      height: 65%;
      transform: translate(-50%,-50%);
      // z-index: 1;
      color: #fff;
    }
    span:nth-child(1){
      transform: translate(-50%,-50%) rotate(0deg)
    }
    span:nth-child(2){
      transform: translate(-50%,-50%) rotate(60deg)
    }
    span:nth-child(3){
      transform: translate(-50%,-50%) rotate(120deg)
    }
    span:nth-child(4){
      transform: translate(-50%,-50%) rotate(180deg)
    }
    span:nth-child(5){
      transform: translate(-50%,-50%) rotate(240deg)
    }
    span:nth-child(6){
      transform: translate(-50%,-50%) rotate(300deg)
    }
  }
  .model{
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: rgba(140, 137, 137, 0.14);
  }

  .marginTop10{
    width:calc(100% - 30px);
    left: 15px;
    top: 68%;
    max-height: 30%;
    overflow: hidden;
  }
}
</style>